<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#table {
				margin: 10px auto;
				border: 1px black solid;
				width: 280px;	
			}
			#div {
				width: 280px;
				margin: 10px auto;
				border: 1px black solid;	
			}
			tr td{
				border: 1px black solid;	
			}
		</style>
		<script type="text/javascript">
			function delA(){
						var tr=this.parentNode.parentNode;
						/*var name=tr.getElementsByTagName("td")[0].innerHTML;*/
						var name=tr.children[0].innerHTML;
						var flag=confirm("确认删除"+name+"吗？");
						if(flag){
							tr.parentNode.removeChild(tr);
						}
						return false;
					}
			window.onload=function(){
				var allA=document.getElementsByTagName("a");				
				for(var i=0;i<allA.length;i++){
					
					allA[i].onclick=delA;
				}
				
				
				var submit=document.getElementById("submit");
				submit.onclick=function(){
					var name=document.getElementsByName("name")[0].value;
					var email=document.getElementsByName("email")[0].value;
					var salary=document.getElementsByName("salary")[0].value;
					var tr=document.createElement("tr");
					tr.innerHTML="<td>"+name+"</td>"+
								 "<td>"+email+"</td>"+
								 "<td>"+salary+"</td>"+
								 "<td><a href='javascipt:;'>delete</a></td>";
					var a=tr.getElementsByTagName("a")[0];
					a.onclick=delA;
					var table=document.getElementById("table");
					var tbody=table.getElementsByTagName("tbody")[0];
					tbody.appendChild(tr);
					
				}
				
				
			}
		</script>
	</head>
	<body>
		<table id="table">
			<tr>
				<td>name</td>
				<td>email</td>
				<td>salary</td>
				<td></td>
			</tr>
			<tr>
				<td>张三</td>
				<td>14234486@qq.com</td>
				<td>20000</td>
				<td><a href="ww">delete</a></td>
			</tr>
			<tr>
				<td>李四</td>
				<td>19239086@qq.com</td>
				<td>20000</td>
				<td><a href="ww">delete</a></td>
			</tr>
		</table>
		<div id="div">
			<table>
				<tr>
					添加新员工
				</tr>				
				<tr>
					<td style="border: 0px;">
						name:
					</td>
					<td>
						<input type="text" name="name"/>
					</td>
				</tr>			
				<tr>
					<td style="border: 0px;" >
						email:
					</td>
					<td>
						<input type="text" name="email"/>
					</td>
				</tr>				
				<tr>
					<td style="border: 0px;">
						salary:
					</td>
					<td>
						<input type="text" name="salary"/>
					</td>
				</tr>
				<tr style="border: 0px;">
					<td align="center" colspan="2" style="border: 0px;">
						<button id="submit">submit</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
